<template>
  <div class="spin-layer" v-if="status">
    <mt-spinner class="spin-circle" type="triple-bounce" :size="150" color="#ff8b00">
      加载数据中......
    </mt-spinner>
  </div>
</template>


<script>
  export default {
    name: 'SpinLoading',
    data () {
      return {
        status: false
      }
    },
    mounted () {
      var _this = this
      this.$Central.$on('loading', function (status) {
        _this.status = status
      })
    }
  }
</script>

<style lang="scss" scoped>
   @import "../assets/css/px2rem";

  .spin-layer{
    position: fixed;
    width:100%;
    z-index: 2000;
    height: 100%;
    display: block;
    background-color: rgba(0,0,0,0.1);
  }

  .spin-circle{
    position: fixed;
    left: 50%;
    top: 50%;
    width: px2rem(300px);
    height: auto;
    text-align: center;
    z-index: 2001;
    transform: translate(-50%,-50%);
  }
</style>
